<template>
  <div class="container">
    <CalcGridTemplate :btns="btns" @gridClick="onClick">
      <template #input>
        <div>{{ input }}</div>
      </template>

      <template #content>
        <div>{{ content }}</div>
      </template>
    </CalcGridTemplate>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { numTransitionBig } from "@/utils";

const TYPE_ENUM = {
  CLEAR: "CLEAR",
  CALC: "CALC"
};

const btns = reactive<gridType[]>([
  { type: "1", html: "1" },
  { type: "2", html: "2" },
  { type: "3", html: "3" },
  { type: "4", html: "4" },
  { type: "5", html: "5" },
  { type: "6", html: "6" },
  { type: "7", html: "7" },
  { type: "8", html: "8" },
  { type: "9", html: "9" },
  { type: "0", html: "0" },
  { type: ".", html: "." },
  {
    type: TYPE_ENUM.CLEAR,
    html: "C",
    attrs: {
      style: { color: "#e95804", fontSize: "24px" }
    }
  },
  { type: TYPE_ENUM.CALC, html: "转换", attrs: { class: "grid-span-4" } }
]);

const onClick = (item: gridType) => {
  switch (item.type) {
    case TYPE_ENUM.CLEAR:
      input.value = content.value = "";
      break;
    case TYPE_ENUM.CALC:
      if (input.value) {
        content.value = numTransitionBig(input.value);
      }
      break;

    case ".":
      console.log("value: ", input.value, item.type);
      if (!input.value.trim()) {
        // 空的情况
        input.value = "0.";
      } else if (input.value.split(".").length > 1) {
        // 将第一个 . 去除
        const text = input.value.replace(".", "") + item.type;
        // 替换前面的 0
        input.value = text.replace(/^0*/g, "");
      } else {
        input.value += item.type;
      }
      break;
    default:
      input.value += item.type;
      break;
  }
};

const input = ref("");
const content = ref("");
</script>

<style lang="scss" scoped>
.container {
  :deep(.content) {
    user-select: text;
  }
}
</style>
